<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布</title>
    <style>
        div#outer{
            width: 700px;
            height: 600px;
            border: 2px solid #edb3b1;
            background-color: #d9f2ef;
            /* margin: 0 auto; */
            text-align: center;
        }
        img{
            width: 150px;
            height: 100px;
            border: 1px solid #edb3b1;
        }
        div.center div{
            float: left;
            margin: 40px;
            opacity: 0.5;
        }
        div.center div:hover{
            opacity: 1;
        }
        div.center{
            overflow: hidden;
        }
        div.bottom div{
            overflow: hidden;
            width: 300px;
            margin: 0 auto;
        }
        p{
            float: left;
            width: 100px;
            height: 30px;        
        }
    </style>
    <script>
        window.onload=function(){
            var img=document.images[0];
            var imgs=document.getElementsByClassName('img');
            var win=document.getElementById('win');
            var lose=document.getElementById('lose');
            var peace=document.getElementById('peace');

            var arr=['paper.jpg','rock.jpg','scissor.jpg'];
            function handler(){
                var random=Math.floor(Math.random()*arr.length);
                img.src='./images/'+arr[random];
            };
            setInterval(handler,100);

            var winnum=0;
            var losenum=0;
            var peacenum=0;
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=function(){
                    var src=img.getAttribute('src');
                    if(src.indexOf('paper')!=-1){
                        //电脑玩家为布
                        if(this.alt==0){
                            alert('平局');
                            peacenum+=1;
                            peace.innerHTML=peacenum;
                        }else if(this.alt==1){
                            alert('输了');
                            losenum+=1;
                            lose.innerHTML=losenum;
                        }else{
                            alert('赢了');
                            winnum+=1;
                            win.innerHTML=winnum;
                        }
                    }else if(src.indexOf('rock')!=-1){
                        //电脑玩家为石头
                        if(this.alt==0){
                            alert('赢了');
                            winnum+=1;
                            win.innerHTML=winnum;
                        }else if(this.alt==1){
                            alert('平局');
                            peacenum+=1;
                            peace.innerHTML=peacenum;
                        }else{
                            alert('输了');
                            losenum+=1;
                            lose.innerHTML=losenum;
                        }
                    }else{
                        //电脑玩家为剪刀
                        if(this.alt==0){
                            alert('输了');
                            losenum+=1;
                            lose.innerHTML=losenum;
                        }else if(this.alt==1){
                            alert('赢了');
                            winnum+=1;
                            win.innerHTML=winnum;
                        }else{
                            alert('平局');
                            peacenum+=1;
                            peace.innerHTML=peacenum;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <h1>石头剪刀布</h1>
        <div class="top">
            <h3>电脑玩家</h3>
            <div><img src="./images/paper.jpg" alt=""></div>
        </div>
        <div class="center">
            <h3>玩家</h3>
            <div><img src="./images/paper.jpg" alt="0" class="img"></div>
            <div><img src="./images/rock.jpg" alt="1" class="img"></div>
            <div><img src="./images/scissor.jpg" alt="2" class="img"></div>
        </div>
        <div class="bottom">
            <div>
                <p>胜利</p>
                <p>失败</p>
                <p>平局</p>
            </div>
            <div>
                <p id="win">0</p>
                <p id="lose">0</p>
                <p id="peace">0</p>
            </div>
        </div>
    </div>
</body>
</html>